/**
 * Created by imac13 on 19/1/5.
 */
import React,{ Component } from 'react';
import { Card,Carousel } from 'antd';
import './../ui.less'

class CarouselUi extends Component {

    render(){
        return(
            <div>
                <Card title="文字背景轮播" className="card-wrapper">
                    <Carousel>
                        <div><h3>1</h3></div>
                        <div><h3>2</h3></div>
                        <div><h3>3</h3></div>
                        <div><h3>4</h3></div>
                    </Carousel>
                </Card>
                <Card title="图片轮播" className="card-wrapper slide-wrapper">
                    <Carousel>
                        <div>
                            <img src="/carousel-img/carousel-1.jpg" alt=""/>
                        </div>
                        <div>
                            <img src="/carousel-img/carousel-2.jpg" alt=""/>
                        </div>
                        <div>
                            <img src="/carousel-img/carousel-3.jpg" alt=""/>
                        </div>
                    </Carousel>
                </Card>
                <Card title="图片背景自动轮播" className="card-wrapper">
                    <Carousel autoplay>
                        <div><h3>1</h3></div>
                        <div><h3>2</h3></div>
                        <div><h3>3</h3></div>
                        <div><h3>4</h3></div>
                    </Carousel>
                </Card>
                <Card title="图片背景动画轮播-fade" className="card-wrapper">
                    <Carousel autoplay effect="fade">
                        <div><h3>1</h3></div>
                        <div><h3>2</h3></div>
                        <div><h3>3</h3></div>
                        <div><h3>4</h3></div>
                    </Carousel>
                </Card>
            </div>
        )
    }
}

export default CarouselUi;